<template>
  <div>
    <el-table :data="books">
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="title" label="书名"></el-table-column>
      <el-table-column prop="author" label="作者"></el-table-column>
      <el-table-column prop="copies" label="数量"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="deleteBook(scope.$index)" type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="showAddDialog" type="primary">添加图书</el-button>
    <el-dialog :visible.sync="addDialogVisible">
      <el-form :model="newBook">
        <el-form-item label="书名">
          <el-input v-model="newBook.title"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="newBook.author"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="newBook.copies" type="number"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button @click="addBook" type="primary">添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [
        { id: 1, title: 'Python 编程', author: 'John Doe', copies: 4 },
        { id: 2, title: '历史的秘密', author: 'Jane Smith', copies: 3 },
        // 其他书籍信息...
      ],
      addDialogVisible: false,
      newBook: {
        id: '',
        title: '',
        author: '',
        copies: ''
      }
    };
  },
  methods: {
    showAddDialog() {
      this.addDialogVisible = true;
    },
    addBook() {
      if (this.newBook.title && this.newBook.author && this.newBook.copies) {
        this.newBook.id = this.books.length + 1;
        this.books.push({ ...this.newBook });
        this.addDialogVisible = false;
        this.newBook = { id: '', title: '', author: '', copies: '' };
      }
    },
    deleteBook(index) {
      this.books.splice(index, 1);
    }
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
